<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <script src="vue.min.js"></script>
    </head>
    <body>
    <div id="parnts">
    	<span>{{test2}}</span>
    	<children message="hello!"></children>
    </div>

    <!-- 组件 -->
    <script type="text/x-template" id="children">
    	<div>{{test1}}</div>
    	<div>{{message2}}</div>
    </script>

    <script type="text/javascript">
    	Vue.component("children",{
    		template:"#children",
    		props:["message"],//"test1",
    		data: function(){
    			return {
    				test1:"this is a children",
    				//message2:this.message
    			}
    		}
    	})

    	var parnts = new Vue({
    		el:"#parnts",
    		data:{
    			test1:"this is a children",
    			test2:"this is parnts"
    		}
    	})
    </script>
    </body>
</html>